<!-- UserInfo.vue -->
<template>
    <div class="user-info" @click="handleClick">
        <img class="avatar" :src="avatarUrl" alt="用户头像">
        <div class="info-group">
            <div class="nickname">{{ nickname }}</div>
            <div class="account">{{ account }}</div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'  // 新增store引入

const userStore = useUserStore()  // 新增store实例
const avatarUrl = computed(() => userStore.user?.avatar || '')  // 新增计算属性获取头像

const router = useRouter()
const handleClick = () => {
    router.push('/personhomepage')
}
defineProps({
    nickname: {
        type: String,
        default: '昵称'
    },
    account: {
        type: String,
        default: '账号：'
    }
})
</script>

<style scoped>
.user-info {
    display: flex; /* 新增flex布局 */
    align-items: center; /* 新增垂直居中 */
    padding: 12px 16px;
    background: #ffffff;
    margin: 12px 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.avatar {  /* 新增头像样式 */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.info-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nickname {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
}

.account {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    letter-spacing: 0.5px;
}
</style>